<script setup lang="ts">
import { computed, defineProps, onMounted, reactive } from 'vue'
/**
 * 获取计划详情
 * standard_price_template:标准模板(含价格)
 * standard_noprice_template:标准模板(不含价格)
 * front_bg_template:前置背景图模板
 * countdown_template:倒计时模板
 * postposition_questionnaire_template:后置问卷模板
 * group_template:团购模板
 */
// 接收父组件传递的templateInfo参数
const props = defineProps<{
  templateInfo?: any
}>()
const emit = defineEmits(['submit'])
const submit = async () => {
  emit('submit')
}
const info=reactive({
  time:60*10,
  isDisable:false
})
//倒计时
const countdown=()=>{
  const timer=setInterval(()=>{
    info.time--
    //倒计时结束，清除定时器
    if(info.time<=0){
      info.isDisable=true
      clearInterval(timer)
    }
  },1000)
}
const formatTime = computed(() => {
    let h=parseInt(info.time/60+'')
    let m=parseInt(info.time%60+'')
    let sh=h+''
    let sm=m+''
    //不足2位，补0
    if(h<10){
      sh='0'+h
    }
    if(m-0<10){
      sm='0'+m
    }
    return sh+':'+sm
});
onMounted(()=>{
  countdown()
})
</script>

<template>
  <div class="fv">
    <div class="footerView">
      <div class="footer df">
        <div class="price" v-if="props.templateInfo?.templateStyle!='standard_noprice_template'">
            <div class="price_c">
                <div class="originalPrice" v-if="props.templateInfo?.showOriginalPrice"><span>指导价{{props.templateInfo?.originalPrice||0}}元</span></div>
                <div class="time">优惠倒计时</div>
            </div>
        </div>
        <div class="d_time">{{ formatTime }}</div>
        <div class="btn" :class="{'pic':props.templateInfo?.templateStyle!='standard_noprice_template'}">
          <button :disabled="info.isDisable" :style="{'background':info.isDisable?'#ccc':'#d32602'}" @click="submit">{{props.templateInfo?.signupButtonText||'立即抢购'}}</button>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.fv {
  .footerView{
    position: fixed;
    bottom: 0;
    z-index: 10;
    width: 10rem;
    .footer{
        background:#fff;
        display: flex;
        justify-content: space-between;
        box-shadow: 0px 0px 1px#333333 ;
        -webkit-box-shadow: 0px 0px 1px #333333 ;
        align-items: center;
        .price{
            width: auto;
            padding-left:20px;
            padding-right: 10px;
            font-size: 12px;
            font-weight: 700;
            color: #5f3825;
            height: 1.4rem;
            line-height: 14px;
            text-align: center;
            display: flex;
            align-items: center; /* 垂直居中 */
            .price_c{
                .time{
                    color: #d32602;
                }
                .originalPrice{
                    font-size: 12px;
                    font-weight: 500;
                    color: #666;
                    text-decoration: line-through;

                }
            }
            
            
            
        }
        .d_time{
            font-size: 0.8rem;
            line-height: 1.4rem;
            color: #d32602;
            font-weight: 700;
            margin-right: 30px;
            width: auto;
        }
        .btn{
            flex: 1;
            height: 1.4rem;
            display: flex;
            align-items: center; /* 垂直居中 */
            button{
                width: 85%;
                height: 1rem;
                cursor: pointer;
                margin-left: 10%;
                background: #d32602;
                line-height: 1rem;
                text-align: center;
                font-size: 0.7rem;
                font-weight: 700;
                color: #fff;
                padding: 0;
                outline: none;
                border: 0;
                vertical-align: top;
                border-radius: 0.5rem;
            }
        }
    }
  }
}

</style>